<template>
  <div>

    <!--工具条.高级查询和新增-->
    <br/>
    <el-col :span="24" class="toolbar" style="padding-left: 10px">
      <el-form :inline="true"  :model="queryOne">
        <el-form-item >
          <el-input  v-model="queryOne.name"  placeholder="一级分类名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="queryOneType">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="typeAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>


  <!--列表-->
  <el-table :data="dictionaryType" highlight-current-row @row-click="show" @selection-change="selsChange"
            style="width: 100%;">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column type="index" width="60" label="编号">
    </el-table-column>
    <el-table-column prop="name" label="数据字典名" min-width sortable>
    </el-table-column>
    <el-table-column prop="sn" label="数据字典描述" min-width sortable>
    </el-table-column>
    <el-table-column label="操作" min-width>
      <template scope="scope">
        <el-button size="small" @click.native.stop="typeEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click.native.stop="typeDel(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <br/>
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" style="margin-left:10px">批量删除
      </el-button>
      <el-pagination
        background
        :current-page="currentOne"
        :page-size="sizeOne"
        :total="totalsOne"
        :page-sizes="[2,5,10,15,20]"
        style="float:right;margin-right: 450px"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="currentOneChange"
        @size-change="sizeOneChange"
      ></el-pagination>
    </el-col>

    <el-drawer
      title="数据字典明细"
      :visible.sync="table"
      direction="rtl"
      size="50%">

      <!--高级查询和新增-->
      <br/>
      <el-col :span="24" class="toolbar" style="padding-left: 10px">
        <el-form :inline="true" :model="queryTwo">
          <el-form-item >
            <el-input v-model="queryTwo.name" placeholder="数据字典明细名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="queryTwoDetail">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleDetails">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-table :data="dictionaryDetail" >
        <el-table-column type="index" width="60" label="编号"></el-table-column>
        <el-table-column property="name" label="明细名" width="200"></el-table-column>
        <el-table-column label="操作" min-width>
          <template scope="scope">
            <el-button size="small" @click="detailsEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="detailsDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <br/>
      <el-col :span="24" class="toolbar">

        <el-pagination
          background
          :current-page="currentTwo"
          :page-size="sizeTwo"
          :total="totalsTwo"
          :page-sizes="[2,5,10,15,20]"
          style="float:right;margin-right: 150px"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentTwoChange"
          @size-change="sizeTwoChange"
        ></el-pagination>
      </el-col>


    </el-drawer>

    <!--    数据字典分类添加和修改模态框-->
    <el-dialog :title="title" :visible.sync="typeFormVisible" :close-on-click-modal="false">
      <el-form :model="typeForm" label-width="80px" :rules="typeFormRules" ref="typeForm">
        <el-form-item label="描述" prop="sn" style="width: 500px;">
          <el-input v-model="typeForm.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="名字" prop="name" style="width: 500px;">
          <el-input v-model="typeForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="typeFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="typeSubmit">提交</el-button>
      </div>
    </el-dialog>

    <!--    数据字典明细添加和修改模态框-->
    <el-dialog title="titleTwo" :visible.sync="detailsFormVisible" :close-on-click-modal="false">
      <el-form :model="detailsForm" label-width="80px" :rules="detailsFormRules" ref="typeForm">
        <el-form-item label="明细名字" prop="name" style="width: 500px;">
          <el-input v-model="detailsForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="detailsFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="detailsSubmit">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import dictionary from '@/api/system/dictionary/dictionary'

export default {
  data(){
    return{
      sels: [],
      title:'',
      titleTwo:'',
      typeFormVisible:false,
      detailsFormVisible:false,
      table:false,
      typeFormRules:{
        name: [
          {required: true, message: '请输入名字', trigger: 'blur'}
        ],
        sn: [
          {required: true, message: '请输入描述', trigger: 'blur'}
        ]
      },
      detailsFormRules:{
        name: [
          {required: true, message: '请输入名字', trigger: 'blur'}
        ],
      },
      queryOne:{
        name:''
      },
      queryTwo:{
        name:''
      },
      currentOne:1,
      sizeOne:5,
      totalsOne:0,

      currentTwo:1,
      sizeTwo:5,
      totalsTwo:0,

      dictionaryType:[],
      dictionaryDetail:[],

      typeForm:{

      },
      detailsForm:{
        id:null,
        name:'',
        typesId:0
      },
    }
  },
  methods:{
    // 查询数据字典类型.分页加高级查询
    listType(){
      dictionary.pageQueryType(this.currentOne,this.sizeOne,this.queryOne)
        .then(response=>{
          this.dictionaryType = response.data.rows
          this.totalsOne = response.data.totals
        })
    },
    listDetail(id){
      dictionary.pageQueryDetail(this.currentTwo,this.sizeTwo,this.queryTwo,id)
        .then(response=>{
          this.dictionaryDetail = response.data.rows
          this.totalsTwo = response.data.totals
          this.detailsForm.typesId = id
        })
    },
    // 展示点击行对应的数据字典明细
    show(data){
      this.table = !this.table
      this.queryTwo = {}
      this.currentTwo = 1
      this.sizeTwo = 5
      this.listDetail(data.id)
    },
    typeAdd(){
      this.typeForm = {}
      this.typeFormVisible = true
      this.title = "添加数据字典"
    },
    typeSubmit(){
      dictionary.saveType(this.typeForm)
        .then(response=>{
          this.$message({
            showClose: true,
            message: '添加成功!',
            type: 'success'
          });
          this.typeFormVisible = false
          this.listType()
        })
    },
    typeEdit(index,row){
      this.title = "修改数据字典"
      this.typeFormVisible = true
      this.typeForm = Object.assign({}, row);
    },
    typeDel(index,row){
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        dictionary.deleteType(row.id)
          .then(response => {
            this.$message({
              showClose: true,
              message: '删除成功!',
              type: 'success'
            });
            this.currentOne = 1
            this.listType()
          })
          .catch(error => {
            return this.$message({
              showClose: true,
              message: '删除失败',
              type: 'error'
            })
          })
      }).catch(() => {

      });

    },
    handleDetails(){
      this.titleTwo="添加明细"
      this.detailsFormVisible=true
      this.detailsForm={
        id:null,
        name:'',
        typesId: this.detailsForm.typesId
      }
    },
    detailsSubmit(){
      this.$refs.typeForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            //NProgress.start();
            let para = Object.assign({}, this.detailsForm);
              dictionary.saveDetails(para)
                .then(response => {
                  this.$message({
                    showClose: true,
                    message: '操作成功!',
                    type: 'success'
                  })
                  this.detailsFormVisible = false
                  this.listDetail(this.detailsForm.typesId)
                })
                .catch(error => {
                  return this.$message({
                    showClose: true,
                    message: '操作失败!请稍后重试',
                    type: 'error'
                  })
                })
          });
        }
      });
    },
    detailsEdit(index,row){
      this.titleTwo = "修改"
      this.detailsFormVisible = true
      this.detailsForm = Object.assign({}, row);
    },
    detailsDel(index,row){
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        dictionary.deleteDetails(row.id)
          .then(response => {
            this.$message({
              showClose: true,
              message: '删除成功!',
              type: 'success'
            });
            this.currentTwo = 1
            this.listDetail(this.detailsForm.typesId)
          })
          .catch(error => {
            return this.$message({
              showClose: true,
              message: '删除失败',
              type: 'error'
            })
          })
      }).catch(() => {

      });
    },
    currentOneChange(val){
      this.currentOne = val
      this.listType()
    },
    sizeOneChange(val){
      this.sizeOne = val
      this.listType()
    },
    currentTwoChange(val){
      this.currentTwo = val
      this.listDetail(this.detailsForm.typesId)
    },
    sizeTwoChange(val){
      this.sizeTwo = val
      this.listDetail(this.detailsForm.typesId)
    },
    queryOneType(){
      this.currentOne = 1
      this.listType()
    },
    queryTwoDetail(){
      this.currentTwo = 1
      this.listDetail(this.detailsForm.typesId)
    },
    batchRemove(){
      var ids = this.sels.map(item => item.id)
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        dictionary.deleteTypeBatch(ids)
          .then(() =>{
            this.$message({
              showClose: true,
              message: '删除成功!',
              type: 'success'
            });
            this.listType()
          })
      }).catch(() => {

      });
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
  },
  created() {
    this.listType()
  },
}
</script>
